<template>
	<div class="rewardeffects">
		<!-- 飘落星星特效 -->
		<div v-transfer-dom>
			<x-dialog v-model="showSnowflake" class="dialog-snowflake" hide-on-blur>
				<div class="snowflake" id="snowflake"></div>
			</x-dialog>
		</div>
		<!-- 增加积分 -->
		<div v-transfer-dom>
			<x-dialog v-model="showScore" class="dialog-score" hide-on-blur @on-hide="closeEffects">
				<div class="re-score">+{{integral}}积分</div>
			</x-dialog>
		</div>
		<!-- 抽奖 -->
		<div v-transfer-dom>
			<x-dialog v-model="showLottery" class="dialog-turnplate" hide-on-blur @on-hide="closeEffects">
				<div class="wheel" ref="wheel">
					<canvas class="wheelCanvas" id="wheelCanvas" width="400" height="400"></canvas>
					<img @click="doLottery" class="pointer" src="/static/images/wheel-pointer.png" />
				</div>
				<div v-if="turnWheel.endTime">
					<p class="re-txt">距离活动结束时间：</p>
					<clocker v-if="turnWheel.endTime" :time="turnWheel.endTime" class="re-clocker">
						<span class="day">%D</span>天
						<span class="day">%H</span>时
						<span class="day">%M</span>分
						<span class="day">%S</span>秒
					</clocker>
				</div>
				<p class="re-warm-prompt">温馨提示：请返回到微信公众号会话页面领取；如因网络信号或微信平台原因，可能会有时间延迟，请耐心等待，谢谢！</p>
				<p class="re-declare">本活动最终解释权归主办方所有</p>

				<div v-if="showCloseLottery" @click="showLottery=false" class="re-vux-close">
					<i class="iconfont icon-close"></i>
				</div>
			</x-dialog>
		</div>
		<!-- 抽奖结果提示 -->
		<div v-transfer-dom>
			<x-dialog v-model="showLotteryTip" class="dialog-tip" hide-on-blur @on-hide="closeLotteryResult">
				<div class="rp-b1">
					<div class="rp-y1">
						<div class="rp-money">
							<div id="tip" v-html="lotteryTip"></div>
						</div>
					</div>
					<div class="rp-cv">
						<img src="/static/images/rp.png" alt="">
						<div class="cv-t">
							<span v-if="lotteryTip == '谢谢参与'">谢谢参与</span>
							<span v-else>恭喜你获得</span>
							<p class="cv-award"></p>
						</div>
					</div>
				</div>
				<div class="rp-close" @click="closeEffects">
					<i class="iconfont icon-close"></i>
				</div>
				<x-button v-if="this.lotteryList&&this.lotteryList.length>0" @click.native="closeLotteryResult" style="width:8rem;margin-top:10px;background-color:#ff9800;color:#fff;">下一个</x-button>
			</x-dialog>
		</div>

		<!-- 红包结果提示 -->
		<div v-transfer-dom v-if="redpack">
			<x-dialog v-model="showTimeAward" class="dialog-timeaward" hide-on-blur @on-hide="closeEffects">
				<div class="i-time">
					<div class="i-bg-g">
						<div class="i-bg-w">
							<p>时间津贴</p>
							<p>{{redpack.money}}
								<span>元</span>
							</p>
						</div>
					</div>
					<div class="i-time-txt">
						温馨提示：请返回到微信公众号会话页面领取；如因网络信号或微信平台原因，可能会有时间延迟，请耐心等待，谢谢！
					</div>
					<div class="i-time-bg"></div>
				</div>

				<div class="rp-close" @click="showTimeAward=false">
					<i class="iconfont icon-close"></i>
				</div>
			</x-dialog>
		</div>
	</div>
</template>

<script>
import { XButton, XDialog, Clocker, TransferDomDirective as TransferDom } from 'vux'
import { drawWheelCanvas, isMobile } from '@/plugin/RewardRotate'
// 图片信息
var imgSorry = new Image();
imgSorry.src = "/static/images/2.png";
export default {
	data() {
		return {
			showSnowflake: false,
			showScore: false,
			showLottery: false,
			showCloseLottery: true,
			showLotteryTip: false,
			showTimeAward: false,
			lotteryTip: null,
			turnWheel: {
				awardsList: [],
				prizeIndex: null,
				endTime: null,
				outsideRadius: 192,			//转盘外圆的半径
				textRadius: 155,			//转盘奖品位置距离圆心的距离
				insideRadius: 68,			//转盘内圆的半径
				startAngle: 0,				//开始角度
				bRotate: false				//false:停止;ture:旋转
			},
			imgSorry: "~/../images/2.png"
		}
	},
	directives: {
		TransferDom
	},
	components: {
		XButton,
		XDialog,
		Clocker
	},
	props: ['type', 'integral', 'redpack', 'lotteryList'],
	mounted() {
		this.$nextTick(function () {
			// 星星掉落，增加积分特效
			if (this.type == 1 && this.integral > 0) {
				this.showSnowflake = true
				document.body.style.overflow = 'hidden'
				document.body.style.position = 'fixed'
				createSnow('snowflake', 30, () => {
					this.showSnowflake = false
					this.showScore = true
					setTimeout(() => {
						this.showScore = false
						document.body.style.overflow = 'auto'
						document.body.style.position = 'relative'
					}, 1000)
				});
			}

			// 大转盘
			if (this.type == 2) {
				// console.log(this.showLottery)
				this.showLottery = true
				// 自适应部分 通过JS 计算canvas 大小、位置、外圈半径，内圈半径，文字位置
				this.$refs.wheel.style.width = document.body.clientWidth * .92 + 'px'
				this.$refs.wheel.style.height = document.body.clientWidth * .92 + 'px'
				document.getElementById("wheelCanvas").setAttribute("width", document.body.clientWidth * .84 + 'px')
				document.getElementById("wheelCanvas").setAttribute("height", document.body.clientWidth * .84 + 'px')
				document.getElementById("wheelCanvas").style.marginTop = document.body.clientWidth * .04 + 'px'
				this.turnWheel.outsideRadius = document.body.clientWidth * .84 / 2
				this.turnWheel.textRadius = document.body.clientWidth * .84 / 2 - 40
				this.turnWheel.insideRadius = document.body.clientWidth * .84 / 5.2
				//页面所有元素加载完毕后执行drawWheelCanvas()方法对转盘进行渲染
				// 取出第一个抽奖进行渲染
				let lottery = this.lotteryList[0]
				// console.log(JSON.parse(lottery.awards_list))
				if ((typeof lottery.awards_list == 'string')) {
					this.turnWheel.awardsList = JSON.parse(lottery.awards_list)
				} else {
					this.turnWheel.awardsList = JSON.parse(JSON.stringify(lottery.awards_list))
				}
				this.turnWheel.prizeIndex = lottery.prize_index
				this.turnWheel.endTime = lottery.end_time
				drawWheelCanvas(this.turnWheel, imgSorry);
			}

			// 时间津贴
			if (this.type == 3) {
				this.showTimeAward = true
			}
		})
	},
	methods: {
		// 抽奖按钮点击触发事件
		doLottery() {
			// 正在转动，直接返回
			if (this.turnWheel.bRotate) return;
			if (this.lotteryList.length > 0) {
				this.$emit('lotteryCallBack', this.lotteryList[0])
				this.lotteryList.splice(0, 1)
				this.turnWheel.bRotate = true
				this.showCloseLottery = false
				//旋转转盘 item:中奖奖项序号，从0开始的; txt：提示语 ,count 奖品的总数量;
				var rotateFunc = (idx, count) => {
					// 应该旋转的角度，旋转插件角度参数是角度制。
					var baseAngle = 360 / count;
					// 旋转角度 == 270°（当前第一个角度和指针位置的偏移量） - 奖品的位置 * 每块所占的角度 - 每块所占的角度的一半(指针指向区域的中间)
					var angles = 360 * 3 / 4 - (idx * baseAngle) - baseAngle / 2; // 因为第一个奖品是从0°开始的，即水平向右方向
					$('#wheelCanvas').stopRotate();
					// 注意，jqueryrotate 插件传递的角度不是弧度制。
					// 中奖奖项
					let bingoPrize = this.turnWheel.awardsList[idx]
					// 中奖奖项提示文字
					this.lotteryTip = bingoPrize.money ? bingoPrize.title + '<br/>' + bingoPrize.money + '元' : bingoPrize.title
					$('#wheelCanvas').rotate({
						angle: 0,
						animateTo: angles + 360 * 5, // 这里多旋转了5圈，圈数越多，转的越快
						duration: 5000,
						callback: () => { // 回调方法
							this.showLotteryTip = true
							// if (isMobile.any()) // 判断是否移动设备
							// {
							// 	// 调OC代码
							// 	window.location.href = "turntable://test.com?" + "index=" + item + "&tip=" + tip;
							// }
						}
					});
				};
				// 开始抽奖
				rotateFunc(this.turnWheel.prizeIndex, this.turnWheel.awardsList.length);
			} else {
				this.$vux.toast.text('所有抽奖已完成<br/>暂无更多抽奖')
				this.turnWheel.bRotate = true
			}
		},
		// 关闭抽奖结果弹窗
		closeLotteryResult() {
			this.showLotteryTip = false
			this.turnWheel.bRotate = false
			this.showCloseLottery = true
			if (this.lotteryList.length > 0) {
				// 取出第一个抽奖进行渲染
				let lottery = this.lotteryList[0]
				console.log(lottery.awards_list)
				this.turnWheel.awardsList = JSON.parse(lottery.awards_list)
				this.turnWheel.prizeIndex = lottery.prize_index
				this.turnWheel.endTime = lottery.end_time
				drawWheelCanvas(this.turnWheel, imgSorry);
			}
		},
		// 关闭星星特效时调用父组件事件
		closeEffects() {
			this.$emit("clearType")
		},
		// // 关闭大转盘时调用父组件事件
		// closeWheel() {
		// 	this.$emit("clearType")
		// },
		// // 关闭大转盘时调用父组件事件
		// closeTimeAward() {
		// 	this.$emit("clearType")
		// }
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>